<template>
    <div class="filter" :class="{'is-filter':isFilter}">
        <div class="filter-section">
            <ul class="filter-nav list-unstyled text-center">
                <li @click="filterStart(0)">
                    <a href="#" :class="{'active-text':filterData.regionid>0||filterData.subway_id>0}">
                        <span class="text">{{showRegionText}}</span>
                        <span class="caret"></span>
                    </a>
                </li>
                <li @click="filterStart(1)">
                    <a href="#" :class="{'active-text':filterData.unitprice>0}">
                        <span class="text">{{showUnitPriceText}}</span>
                        <span class="caret"></span>
                    </a>
                </li>
                <li @click="filterStart(2)">
                    <a href="#" :class="{'active-text':filterData.price>0}">
                        <span class="text">{{showTotalPriceText}}</span>
                        <span class="caret"></span>
                    </a>
                </li>
                <li @click="filterStart(3)">
                    <a href="#" :class="{'active-text':showMoreText}">
                        <span class="text">更多</span>
                        <span class="caret"></span>
                    </a>
                </li>
            </ul>

            <!-- 區域展示面板 -->
            <section v-show="activeConditionID==0&&isFilter" class="region text-center">
                
                <!-- 区域或者捷运 -->
                <ul>
                    <li @click="searchBy(1)">
                        <span :class="{'active-text':activeSubRegionID==1}" >區域</span>
                    </li>
                    <li @click="searchBy(2)">
                        <span :class="{'active-text':activeSubRegionID==2}" >捷運</span>
                    </li>
                </ul>
                
                <!-- 顯示市縣 -->
                <ul @scroll="rememberScrollTop($event,'region')" id="region" v-if="activeSubRegionID==1" >
                    <li :class="{'active-text':region.id==activeRegionID&&region.id!=0}" @click="getSectionByRegion(region)" v-for="region in regions" :key="region.id">{{region.txt}}</li>
                </ul>

                <!-- 顯示區 -->
                <ul @scroll="rememberScrollTop($event,'section')" id="section" v-if="activeSubRegionID==1&&areasOfRegion.length">
                    <li @click="searchByRegion(area)" :key="area.id" :class="{'active-text':area.id==activeSectionID&&area.id!=0}" v-for="area in areasOfRegion">{{area.txt}}</li>
                </ul>
                
                <!-- 顯示捷運 -->
                <ul @scroll="rememberScrollTop($event,'metro')" id="metro" v-if="activeSubRegionID==2">
                    <li :class="{'active-text':metro.id==activeMetroID}" @click="getStationsByMetro(metro)" v-for="metro in metros">{{metro.txt}}</li>
                </ul>

                <!-- 展示捷運站 -->
                <ul @scroll="rememberScrollTop($event,'station')" id="station" v-if="activeSubRegionID==2&&stationsOfMetro.length">
                    <li @click="searchByMetro(station)" :class="{'active-text':station.id==activeStationID}" v-for="station in stationsOfMetro">{{station.txt}}</li>
                </ul>

            </section>

            <!-- 單價展示面板 -->
            <section @scroll="rememberScrollTop($event,'unitprice')" id="unitprice" v-show="activeConditionID==1&&isFilter" class="unit-price">
                <ul class="text-center">
                    <li :class="{'active-text':unitPriceID==priceU.id}" v-for="priceU in unitPrice" @click="searchByUnitPrice(priceU)" >{{priceU.txt}}</li>
                </ul>
                <div class="custom-unit-price">
                    <span>自定義</span>
                    <input type="number" v-model="filterData.unitminprice" placeholder="最小值">
                    <span>-</span>
                    <input type="number" v-model="filterData.unitmaxprice" placeholder="最大值">
                    <span>萬元</span>
                    <button @click="send">確定</button>
                </div>
            </section>

            <!-- 總價展示面板 -->
            <section @scroll="rememberScrollTop($event,'totalprice')" id="totalprice" v-show="activeConditionID==2&&isFilter" class="total-price">
                <ul class="text-center">
                    <li :class="{'active-text':totalPriceID==priceT.id}" v-for="priceT in totalPrice" @click="searchByTotalPrice(priceT)">{{priceT.txt}}</li>
                </ul>
                <div class="custom-total-price">
                    <span>自定義</span>
                    <input type="number" v-model="filterData.minprice" placeholder="最小值">
                    <span>-</span>
                    <input type="number" v-model="filterData.maxprice" placeholder="最大值">
                    <span>萬元</span>
                    <button @click="send">確定</button>
                </div>
            </section>
            
            <!-- 更多展示面板 -->
            <section @scroll="rememberScrollTop($event,'morechoice')" id="morechoice" v-show="activeConditionID==3&&isFilter" class="more-choice" @mousewheel="$event.stopPropagation();">
                <div class="part">
                    <p class="title">排序</p>
                    <span data-o="2" @click="addFilter('o',2)" :class="{'active-item':filterData.o==2}" class="item">單價從高到低</span>
                    <span data-o="1" @click="addFilter('o',1)" :class="{'active-item':filterData.o==1}" class="item">單價從低到高</span>
                    <span data-o="3" @click="addFilter('o',3)" :class="{'active-item':filterData.o==3}" class="item">公開銷售順序</span>
                    <span data-o="4" @click="addFilter('o',4)" :class="{'active-item':filterData.o==4}" class="item">公開銷售倒序</span>
                    <span data-o="5" @click="addFilter('o',5)" :class="{'active-item':filterData.o==5}" class="item">瀏覽人數最多</span>
                    <span data-o="6" @click="addFilter('o',6)" :class="{'active-item':filterData.o==6}" class="item">撥打電話最多</span>
                </div>
                <div class="part">
                    <p class="title">建案狀態</p>
                    <span data-buildstatus="1" @click="addFilter('buildstatus',1)" :class="{'active-item':filterData.buildstatus==1}" class="item">預售屋</span>
                    <span data-buildstatus="2" @click="addFilter('buildstatus',2)" :class="{'active-item':filterData.buildstatus==2}" class="item">新成屋</span>
                </div>
                <div class="part">
                    <p class="title">格局</p>
                    <span data-room="1" @click="addFilter('room',1)" :class="{'active-item':filterData.room==1}" class="item">一房</span>
                    <span data-room="2" @click="addFilter('room',2)" :class="{'active-item':filterData.room==2}" class="item">二房</span>
                    <span data-room="3" @click="addFilter('room',3)" :class="{'active-item':filterData.room==3}" class="item">三房</span>
                    <span data-room="4" @click="addFilter('room',4)" :class="{'active-item':filterData.room==4}" class="item">四房</span>
                    <span data-room="5" @click="addFilter('room',5)" :class="{'active-item':filterData.room==5}" class="item">五房及以上</span>
                </div>
                <div class="part">
                    <p class="title">形態</p>
                    <span data-shape="3" @click="addFilter('shape',3)" :class="{'active-item':filterData.shape==3}" class="item">住宅大樓</span>
                    <span data-shape="7" @click="addFilter('shape',7)" :class="{'active-item':filterData.shape==7}" class="item">電梯公寓</span>
                    <span data-shape="10" @click="addFilter('shape',10)" :class="{'active-item':filterData.shape==10}" class="item">華夏</span>
                    <span data-shape="1" @click="addFilter('shape',1)" :class="{'active-item':filterData.shape==1}" class="item">別墅</span>
                    <span data-shape="2" @click="addFilter('shape',2)" :class="{'active-item':filterData.shape==2}" class="item">透天</span>
                    <span data-shape="8" @click="addFilter('shape',8)" :class="{'active-item':filterData.shape==8}" class="item">商辦大樓</span>
                    <span data-shape="11" @click="addFilter('shape',11)" :class="{'active-item':filterData.shape==11}" class="item">廠辦</span>
                    <span data-shape="9" @click="addFilter('shape',9)" :class="{'active-item':filterData.shape==9}" class="item">其他</span>
                </div>
                <div class="part">
                    <p class="title">主要用途</p>
                    <span data-purpose="1" @click="addFilter('purpose',1)" :class="{'active-item':filterData.purpose==1}" class="item">住家用</span>
                    <span data-purpose="2" @click="addFilter('purpose',2)" :class="{'active-item':filterData.purpose==2}" class="item">住商用</span>
                    <span data-purpose="3" @click="addFilter('purpose',3)" :class="{'active-item':filterData.purpose==3}" class="item">商業用</span>
                    <span data-purpose="4" @click="addFilter('purpose',4)" :class="{'active-item':filterData.purpose==4}" class="item">工商用</span>
                    <span data-purpose="5" @click="addFilter('purpose',5)" :class="{'active-item':filterData.purpose==5}" class="item">工業用</span>
                    <span data-purpose="6" @click="addFilter('purpose',6)" :class="{'active-item':filterData.purpose==6}" class="item">其他</span>
                </div>
                <div class="part">
                    <p class="title">建案標籤</p>
                    <span data-tag="1" @click="addFilter('tag',1)" :class="{'active-item':filterData.tag.split(',').indexOf('1')>-1}" class="item">捷運宅</span>
                    <span data-tag="2" @click="addFilter('tag',2)" :class="{'active-item':filterData.tag.split(',').indexOf('2')>-1}" class="item">明星學區</span>
                    <span data-tag="4" @click="addFilter('tag',4)" :class="{'active-item':filterData.tag.split(',').indexOf('4')>-1}" class="item">重劃區</span>
                    <span data-tag="5" @click="addFilter('tag',5)" :class="{'active-item':filterData.tag.split(',').indexOf('5')>-1}" class="item">近公園</span>
                    <span data-tag="6" @click="addFilter('tag',6)" :class="{'active-item':filterData.tag.split(',').indexOf('6')>-1}" class="item">景觀宅</span>
                    <span data-tag="8" @click="addFilter('tag',8)" :class="{'active-item':filterData.tag.split(',').indexOf('8')>-1}" class="item">創意空間</span>
                    <span data-tag="10" @click="addFilter('tag',10)" :class="{'active-item':filterData.tag.split(',').indexOf('10')>-1}" class="item">製震宅</span>
                    <span data-tag="12" @click="addFilter('tag',12)" :class="{'active-item':filterData.tag.split(',').indexOf('12')>0}" class="item">低首付</span>
                </div>
                <div class="operation">
                    <button @click="reset" class="reset">重置</button>
                    <button @click="send" class="send">確定</button>
                </div>
            </section>
            
        </div>
        <div class="mask" @touchmove="$event.preventDefault()" @mousewheel="$event.preventDefault()" @click="filterStart(activeConditionID)"></div>
    </div>
</template>

<script>
    import regions from '../assets/js/data/Region.js'
    import sections from '../assets/js/data/Section.js'
    import * as Metros from '../assets/js/data/Metro.js'
    import * as price from '../assets/js/data/HousingPrice.js'

    import bus from '../assets/js/bus.js'

    var newRegions = [{txt:'不限',id:0}], newMetros = [];

    /* 整理市縣 */
    regions.forEach( ( region, index ) => {
        region.shift()
        newRegions = newRegions.concat( region )
    } )

    /* 整理捷運線 */
    Metros.Metro.forEach( ( metro, index ) => {
        newMetros = newMetros.concat( metro )
    } )

    export default{
        name: 'houseFilter',
        data(){
            return {
                isFilter: false,             // 是否處於查詢狀態
                regions: newRegions,        // 所有的市縣
                areasOfRegion: [],          // 市縣里的區
                metros: newMetros,             // 捷運線路
                stationsOfMetro: [],               // 捷運線上的站點
                unitPrice: price.UnitPrice,         // 單價
                totalPrice: price.TotalPrice,       // 總價
                activeConditionID: null,     // 激活的過濾條件
                activeRegionID: null,     // 激活的市縣ID
                activeMetroID: null,         // 激活的捷運線ID
                activeSubRegionID: 1,           // 默認的區子ID
                activeStationID: null,       // 激活的站名 
                activeSectionID: null,    // 激活的區ID
                activeRegionText: null,                            // 激活的區名
                unitPriceTxt: null,                                // 激活的單價名
                totalPriceTxt: null,                          // 激活的總價名
                unitPriceID: null,            // 激活的單價ID
                totalPriceID: null,           // 激活的總價ID
                o: null,
                buildstatus: null,
                room: null,
                shape: null,
                purpose: null,
                filterData: {                   // 過濾的篩選條件
                    "unitprice": null,            // 單價
                    "price": null,                 // 總價
                    "o": null,
                    "buildstatus" : null,
                    "room" : null,
                    "shape" : null,
                    "purpose" : null,
                    "tag" : '',
                    "sectionid": null,
                    "regionid": null,
                    "searchtype": null,
                    "p": 1,
                    "subway_line": null,
                    "subway_id": null,
                    "unitminprice": null,                   // 最小單價
                    "unitmaxprice": null,                   // 最大單價
                    "minprice": null,                       // 最小總價
                    "maxprice": null,                       // 最大總價
                },
                scrollTops:{
                    'region': 0,
                    'section': 0,
                    'metro': 0,
                    'station': 0,
                    'unitprice': 0,
                    'totalprice': 0,
                    'morechoice': 0
                }
            }
        },
        methods: {
            filterStart( conditionID ){
                if ( conditionID === this.activeConditionID && this.isFilter ) {
                    this.isFilter = false
                    this.activeConditionID = Number.MIN_SAFE_INTEGER
                    document.documentElement.classList.remove( 'noscroll' )
                    return
                }

                document.documentElement.classList.add( 'noscroll' )
                
                this.isFilter = true
                this.activeConditionID = parseInt( conditionID )

                this.rememberScrollTop()
            },
            getSectionByRegion( region ){
                this.activeRegionID = region.id
                if ( region.id == 0 ) {
                    this.activeRegionText = '區域'
                    this.filterData.sectionid = null
                    this.filterData.regionid = null

                    this.isFilter = false
                    this.send()
                    return
                }
                this.areasOfRegion = sections[region.id]
            },
            searchByRegion( area ){
                this.activeSectionID = area.id

                if ( area.id != 0 ) {
                    this.activeRegionText = area.txt
                }else{
                    // 如果點擊是不限
                    this.regions.forEach( ( item, index ) => {
                        if ( item.id == this.activeRegionID ) {
                            this.activeRegionText = item.txt != '不限' ? item.txt : '區域'
                        }
                    } )
                }

                this.filterData.sectionid = area.id
                this.filterData.regionid = this.activeRegionID
                this.filterData.searchtype = this.activeSubRegionID

                // 清除捷運信息
                this.filterData.subway_id = null
                this.filterData.subway_line = null

                // 發送請求
                this.send()
                this.isFilter = false;
            },
            searchByMetro( station ){
                this.activeRegionText = station.txt
                this.activeStationID = station.id

                this.filterData.searchtype = this.activeSubRegionID
                this.filterData.subway_line = this.activeMetroID
                this.filterData.subway_id = this.activeStationID

                // 清除區域信息
                this.filterData.sectionid = null
                this.filterData.regionid = null

                // 發送請求
                this.send()
                this.isFilter = false
            },
            searchByUnitPrice( priceU ){
                this.unitPriceTxt = priceU.txt
                this.unitPriceID = priceU.id

                if ( priceU.id == 0 ) {
                    this.unitPriceTxt = '單價'
                }

                this.filterData.unitmaxprice = null
                this.filterData.unitminprice = null
                this.filterData.unitprice = priceU.id

                this.send()
                this.isFilter = false
            },
            searchByTotalPrice( priceT ){
                this.totalPriceID = priceT.id
                this.totalPriceTxt = priceT.txt

                if ( priceT.id == 0 ) {
                    this.totalPriceTxt = '總價'
                }

                // 重置最大最小總價
                this.filterData.minprice = null
                this.filterData.maxprice = null
                this.filterData.price = priceT.id

                this.send()
                this.isFilter = false;
            },
            getStationsByMetro( metro ){
                this.activeMetroID = metro.id
                this.stationsOfMetro = Metros.Station[metro.id]
            },
            searchBy( regionOrSubway ){
                this.activeSubRegionID = regionOrSubway
            },
            addFilter( filterName, value ){
                /* 取消激活状态 */
                if ( this.filterData[filterName] == value && filterName != 'tag' ) {
                    this.filterData[filterName] = null;
                    return
                }

                if ( filterName == 'tag' ) {
                    var tags = this.filterData[filterName].split(',')
                    var hasTag = tags.indexOf( String( value ) )

                    if ( hasTag > -1 ) {
                        tags.splice( hasTag, 1 )
                        this.filterData[filterName] = tags.join(',')
                        return
                    }

                    this.filterData[filterName] += value + ','

                }else{
                    this.filterData[filterName] = value                    
                }

            },
            reset(){
                this.filterData.o = null
                this.filterData.buildstatus = null
                this.filterData.room = null
                this.filterData.shape = null
                this.filterData.purpose = null
                this.filterData.tag = ''
            },
            send(){
                // 檢測是否輸入了自定義單價
                if ( this.filterData.unitminprice && this.filterData.unitmaxprice ) {
                    if ( this.filterData.unitminprice >= this.filterData.unitmaxprice ) {
                        alert( '請輸入大於最小值' )
                        return ;
                    }
                    this.unitPriceID = null
                }

                // 檢測是否輸入了自定義總價
                if ( this.filterData.minprice && this.filterData.maxprice ) {
                    if ( this.filterData.minprice >= this.filterData.maxprice ) {
                        alert( '請輸入大於最小值' )
                        return ;
                    }
                    this.totalPriceID = null
                }

                bus.$emit( 'newhouses', this.filterData )
                this.isFilter = false
                document.documentElement.classList.remove( 'noscroll' )
            },
            rememberScrollTop( event, which ){
                // 記住位置
                if ( which ) {
                    this.scrollTops[which] = event.target.scrollTop                    
                }else{
                    // 設置位置
                    for( var key in this.scrollTops ){
                        var ele = document.getElementById( key )
                        if ( ele ) {
                            ele.scrollTop = this.scrollTops[key]
                        }
                    }
                }
            }
        },
        computed: {
            showRegionText(){
                return this.activeRegionText || '區域'
            },
            showUnitPriceText(){
                if ( this.filterData.unitminprice && this.filterData.unitmaxprice ) {
                    this.filterData.unitprice = 99
                    return this.filterData.unitminprice + '-' + this.filterData.unitmaxprice + '萬/坪'
                }

                if ( this.filterData.unitminprice ) {
                    this.filterData.unitprice = 99
                    return this.filterData.unitminprice + '萬/坪以上'
                }

                if ( this.filterData.unitmaxprice ) {
                    this.filterData.unitprice = 99
                    return this.filterData.unitmaxprice + '萬/坪以下'
                }

                return this.unitPriceTxt || '單價'
            },
            showTotalPriceText(){
                if ( this.filterData.minprice && this.filterData.maxprice ) {
                    this.filterData.price = 99
                    return this.filterData.minprice + '-' + this.filterData.maxprice + '萬/坪'
                }

                if ( this.filterData.minprice ) {
                    this.filterData.price = 99
                    return this.filterData.minprice + '萬/坪以上'
                }

                if ( this.filterData.maxprice ) {
                    this.filterData.price = 99
                    return this.filterData.maxprice + '萬/坪以下'
                }

                return this.totalPriceTxt || '總價'
            },
            showMoreText(){
                return this.filterData.o || this.filterData.buildstatus || this.filterData.room || this.filterData.shape || this.filterData.tag || this.filterData.purpose
            }
        }
    }
</script>

<style scoped>
    .caret{
        color: #999;
    }
    .is-filter .mask{
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -1;
        background-color: #333;
        opacity: 0.5;
        filter: blur(5px);
    }
    .filter-section{
        background-color: white;
    }
    .filter{
        background-color: white;
        position: relative;
    }
    .is-filter{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        background-color: white;
        z-index: 100;
    }
    .filter.is-filter .filter-nav{
        margin-bottom: 0;
    }
    .filter .filter-nav{
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
        display: flex;
        height: .88rem;
    }
    .filter .filter-nav li{
        line-height: .88rem;
    }
    .region ul, .unit-price, .total-price, .more-choice{
        border-right: 1px solid #eee;
        height: 5.4rem;
        overflow-y: scroll;
    }
    .region li, .unit-price li, .total-price li{
        height: .8rem;
        line-height: .8rem;
        border-bottom: 1px solid #eee;
    }
    .filter a{
        color: black;
    }
    .filter a.active-text, .active-text{
        color: #2478d2;
    }
    .active-text .caret{
        transform: rotate(180deg);
        color: #2478d2;
    }
    .filter .filter-nav .active-text .text{
        display: inline-block;
        max-width: 1.5rem;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
        white-space: nowrap;
    }
    .filter .region{
        display: flex;
    }
    .filter ul{
        flex: 1;
        list-style: none;
        font-size: .3rem;
        padding: 0;
        margin: 0;
    }
    .filter .filter-nav li{
        flex: 1;
    }
    .filter .filter-nav li a{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        text-decoration: none;
    }

    /* 單價 和 總價 */
    .total-price, .unit-price {
        padding-bottom: 1rem;
    }
    .total-price ul, .unit-price ul{
        overflow-y: scroll;
    }
    .total-price .custom-total-price, .unit-price .custom-unit-price{
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: .96rem;
        padding-top: .1rem;
        padding-left: .2rem;
        color: #999;
        background-color: white;
        font-size: .28rem;
        border-top: 1px solid #eaeaea;
    }
    .total-price input, .unit-price input{
        width: 1.6rem;
        padding-top: .16rem;
        padding-bottom: .16rem;
        text-align: center;
        border: 1px solid #e0e0e0;
        border-radius: 3px;
        font-size: .28rem;
        color: #333;
        margin-left: .1rem;
        margin-right: .1rem;
        outline: none;
    }
    .total-price button, .unit-price button{
        width: 1.6rem;
        height: .6rem;
        font-size: .32rem;
        color: #fff;
        background: #2478d2;
        border-radius: 3px;
        line-height: .5rem;
        text-align: center;
        border: 1px solid #2478d2;
        margin-left: .2rem;
    }

    /*  更多  */
    .more-choice{
        padding-bottom: 1rem;
        height: 9.6rem;
    }
    .more-choice .part{
        border-bottom: 1px solid #eee;
        padding-left: .2rem;
    }
    .more-choice .item{
        display: inline-block;
        line-height: .7rem;
        padding: 0 .2rem;
        margin-right: .1rem;
        margin-bottom: .1rem;
        border: 1px solid #eee;
        font-size: .28rem;
        border-radius: 3px;
    }
    .more-choice .active-item{
        color: rgb(36, 120, 210);
        border: 1px solid rgb(36, 120, 210);
    }
    .more-choice .title{
        margin: .32rem 0;
        font-size: .32rem;
    }
    .more-choice .operation{
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: white;
        height: 1rem;
        border-top: 1px solid #eee;
        display: flex;
    }
    .more-choice .operation button{
        border: 1px solid #eee;
        border-radius: 0.1rem;
        width: 50%;
        margin: .1rem;
        font-size: .34rem;
        display: inline-block;
    }
    .more-choice .reset{
        background-color: white;
    }
    .more-choice .send{
        background-color: rgb(36, 120, 210);
        color: white;
    }
</style>